<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="css/index.css">
    <script src="js/vue.min.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/common.js"></script>
		<style>
			body {
				margin: 0px;
			}

			.el-header {
				background-color: cadetblue;
			}

			.el-aside {
				border-right: 1px solid cadetblue;
				position: absolute;
				top: 60px;
				bottom: 0px;
			}

			.el-main {
				position: absolute;
				top: 60px;
				bottom: 0px;
				right: 0px;
				left: 200px;
				padding: 0px;
			}
		</style>


	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>Header</el-header>
				<el-container>
					<el-aside width="200px">
						<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

					</el-aside>
					<el-main>Main</el-main>
				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					treeData: [{
						label: '一级 1',
						children: [{
							label: '二级 1-1'
						}]
					}],
					defaultProps: {
						children: 'children',
						label: 'label'
					},
				},
				methods: {
					handleNodeClick(data) {
						console.log(data);
					},
					initTreeData(){
						let that = this
						axios.get(API+"boot/selectUserMenu").
						then(function(res) {
							let s=arrayToTree(res.data.data.menuList)
							that.treeData=s
							
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {//vue生命周期函数，挂载完毕之后执行
					this.initTreeData()//初始化获取树的数据
				}

			})
		</script>
	</body>
</html>